<template>
    <div>
      <el-aside id="asideNav" style="background-color: #545c64">
        <div class="logo-name" id="el-menu-vertical"></div>
        <el-menu
          default-active="2"  class="el-menu-vertical-demo"
          background-color="#545c64" text-color="#fff"
          active-text-color="#ffd04b"  @open="handleOpen"
          @close="handleClose"  :collapse="isCollaspse" router>
          <el-menu-item index="/"><i class="el-icon-menu"></i><span slot="title">首页</span></el-menu-item>
          <el-menu-item index="/personal"><i class="el-icon-user"></i><span slot="title">个人资料</span></el-menu-item>
          <el-menu-item index="/smap">
            <i class="el-icon-map-location"></i><span slot="title">可视化管理</span>
          </el-menu-item>
          <el-menu-item index="/commodity">
            <i class="el-icon-goods"></i><span slot="title">商品管理</span>
          </el-menu-item>
          <el-menu-item index="/stock">
            <i class="el-icon-box"></i><span slot="title">库存管理</span>
          </el-menu-item>
          <el-menu-item index="/analysis">
            <i class="el-icon-pie-chart"></i><span slot="title">销售记录分析</span>
          </el-menu-item>
          <el-divider></el-divider>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-files"></i><span slot="title">代码获取</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="https://gitee.com/Cianc/bvm-admin.git"><router-link to="#" class="router-link-nav">Github</router-link></el-menu-item>
              <el-menu-item index="3-2"><router-link to="#" class="router-link-nav">Gitee</router-link> </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
      </el-menu>
      </el-aside>
    </div>
</template>

<script>
    export default {
      name: "Aside",
      props:['screenHeight','isCollaspse'],
      data(){
        return {

        }
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        }
      },
      mounted() {
        document.getElementById('asideNav').style.height = this.screenHeight + 'px';
      }
    }
</script>

<style scoped>
  #asideNav {
    width: auto !important;
    display: flex;
    flex-direction: column;
    /*border-right: solid 1px #e6e6e6;*/
  }

  .logo-name {
    background-color: white !important;
    @extend % w100;
    font-weight: 300;
    z-index: 999;
  }
  .logo-name > p {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #5e6d82;
  }
  .el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
  @extend %h100;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .router-link-nav{
    text-decoration: none;
    color: white;
  }
</style>
